<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { RouterView } from 'vue-router'
const route = useRoute();
const noTab = ref(false);
import router from './router';
watch(
  () => route.meta,
  (val) => {
    noTab.value = Boolean(val.noTab);
  }
);
</script>

<template>
  <div class="app-container">
    <RouterView />
  </div>
  <div v-cloak class="public-bottom" v-if="!noTab">
    <div @click="router.push('/')" class="index">首页</div>
    <div class="logo" @click="router.push('/bored')" ></div>
    <div @click="router.push('/mine')" class="mine">我的</div>
  </div>
</template>

<style scoped lang="scss">
[v-cloak] {
  display: none;
}

.app-container {
  overflow: hidden;
  background: rgb(64, 149, 229)
}

.public-bottom {
  width: 100%;
  height: 75px;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 101;

  &>div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color:rgba(16, 16, 16, 0.6);
  font-size: 12px;
  }
  .index::before{
    content:"";
    display: block;
    width:24px;
    height: 24px;
    display: flex;
    background: url(../src/assets/images/jia.png) no-repeat center;
    background-size: 100%;
    margin-bottom: 2px;
  }
  .mine::before{
    content:"";
    display: block;
    width:24px;
    height: 24px;
    display: flex;
    background: url(../src/assets/images/wd.png) no-repeat center;
    background-size: 100%;
    margin-bottom: 2px;
  }
  .logo{
    width:50px;
    height: 50px;
    background: url(../src/assets/images/logo.png) no-repeat center;
    background-size: 100%;
  }
}
</style>
